<template>
	<view class="motion_view_main">
		<view class="new_goods_main" v-if="newGoods.length > 0">
			<view class="new_goods_text">
				新品首发
			</view>
			<view class="new_goods_images_main">
				<view class="left_goods_image" :style="{ backgroundImage: 'url(' + newGoods[0].newGoodImage + ')' }">
					<view class="new_goods_title">
						{{newGoods[0].newGoodTitle}}
					</view>
					<view class="new_goods_desc">
						{{newGoods[0].newGoodDesc}}
					</view>
					<button type="primary" plain size="mini" @click="toGoodsDetail(newGoods[0])">
						<text>查看商品</text>
						<uni-icons type="right" color="#f9f9f9"></uni-icons>
					</button>
				</view>
				<view class="right_goods_images">
					<view class="right_goods_images_top"
						:style="{ backgroundImage: 'url(' + newGoods[1].newGoodImage + ')' }">
						<view class="new_goods_title">
							{{newGoods[1].newGoodTitle}}
						</view>
						<view class="new_goods_desc">
							{{newGoods[1].newGoodDesc}}
						</view>
						<button type="primary" plain size="mini" @click="toGoodsDetail(newGoods[1])">
							<text>查看商品</text>
							<uni-icons type="right" color="#f9f9f9"></uni-icons>
						</button>
					</view>
					<view class="right_goods_images_bottom"
						:style="{ backgroundImage: 'url(' + newGoods[2].newGoodImage + ')' }">
						<view class="new_goods_title">
							{{newGoods[2].newGoodTitle}}
						</view>
						<view class="new_goods_desc">
							{{newGoods[2].newGoodDesc}}
						</view>
						<button type="primary" plain size="mini" @click="toGoodsDetail(newGoods[2])">
							<text>查看商品</text>
							<uni-icons type="right" color="#f9f9f9"></uni-icons>
						</button>
					</view>
				</view>
			</view>
		</view>
		<view class="hot_sell_goods_main" v-if="hotSellRecommendGoods.length > 0">
			<view class="new_goods_text hot_goods_text">
				热卖推荐
			</view>
			<view class="hot_goods">
				<view class="hot_sell_good" v-for="(item,index) in hotSellRecommendGoods" :key="index"
					@click="toGoodsDetail(item)">
					<image :src="item.hotSellImage" mode="aspectFill" class="hot_good_image"></image>
					<view class="hot_good_desc">
						{{item.desc}}
					</view>
					<view class="hot_good_title">
						{{item.hotSellTitle}}
					</view>
					<view class="hot_good_price">
						{{item.price}}
					</view>
				</view>
			</view>
		</view>
		<view class="new_goods_text for_you_recommend" v-if="foryouRecommendGoods.length > 0">
			<view class="for_you_text">
				为你推荐
			</view>
			<view class="for_you_goods">
				<view class="for_you_per" v-for="(forYouRecommendGood,index) in foryouRecommendGoods" :key="index"
					@click="toGoodsDetail(forYouRecommendGood)">
					<image :src="forYouRecommendGood.imgSrc" mode="aspectFill" class="for_you_recommend_image"></image>
					<view class="for_you_recommend_desc">
						{{forYouRecommendGood.desc}}
					</view>
					<view class="for_you_recommend_title">
						{{forYouRecommendGood.goodTitle}}
					</view>
					<view class="for_you_recommend_price">
						{{forYouRecommendGood.price}}
					</view>
				</view>
			</view>
		</view>

		<!-- 分割线 -->
		<DividerLineVue :width="100" />

		<!-- 商品列表推荐（所有） -->
		<view class="recomment-goods-main" v-if="allGoods.length > 0">
			<view class="item-goods" v-for="(item,index) in allGoods" :key="index">
				<view class="item-goods-image-view">
					<image :src="item.img" mode="aspectFit" class="item-goods-image"></image>
				</view>
				<view class="goods-name">
					{{item.goodsName}}
				</view>
				<view class="goods-price">
					{{item.price}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getGoodsIndexRecommendInfo
	} from '@/request/goods.js';
	import DividerLineVue from '@/components/common-components/DividerLine.vue';
	export default {
		components: {
			DividerLineVue
		},
		data() {
			return {
				newGoods: [{
						newGoodImage: 'https://img0.baidu.com/it/u=3676531763,2829507800&fm=253&fmt=auto&app=138&f=JPEG?w=548&h=500',
						newGoodTitle: '冬日暖居舒享',
						newGoodDesc: '入冬必备保暖好物'
					},
					{
						newGoodImage: 'https://img2.baidu.com/it/u=102911164,209753687&fm=253&fmt=auto&app=120&f=JPEG?w=332&h=332',
						newGoodTitle: '加绒外套 购得领积分',
						newGoodDesc: '接收新品热力'
					},
					{
						newGoodImage: 'https://img2.baidu.com/it/u=674630727,2227490128&fm=253&fmt=auto&app=138&f=JPEG?w=332&h=332',
						newGoodTitle: '出行必备',
						newGoodDesc: '包揽你的收纳需求'
					},
				],
				hotSellRecommendGoods: [{
						hotSellImage: 'https://img2.baidu.com/it/u=1423166279,3098236148&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
						desc: '细腻轻软不掉毛',
						hotSellTitle: '磨毛拼色四件套',
						price: '¥ 158'
					},
					{
						hotSellImage: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01msBGtN24PT57vr0ks_%21%212200717317383-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1733121076&t=17293d28e2fd1fb5f50c0017af953d78',
						desc: '深谙黑色系',
						hotSellTitle: '魔女头饰',
						price: '¥ 52'
					},
					{
						hotSellImage: 'https://imgservice.suning.cn/uimg1/b2c/image/0l_F4ib_Nx6Tbb6SPtm1og.jpg_800w_800h_4e',
						desc: '保温12小时以上',
						hotSellTitle: '保温杯',
						price: '¥ 66'
					},
					{
						hotSellImage: 'https://img1.baidu.com/it/u=4116174637,841617018&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1069',
						desc: '防风防躁',
						hotSellTitle: '无线蓝牙耳机',
						price: '¥ 379'
					},
				],
				foryouRecommendGoods: [{
						imgSrc: 'https://img2.baidu.com/it/u=371687771,9793415&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=750',
						desc: '手机青春版',
						goodTitle: '全新vivo智能手机',
						price: '¥ 1599'
					},
					{
						imgSrc: 'https://img1.baidu.com/it/u=169074585,2107884396&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067',
						desc: '乐器系列',
						goodTitle: '欧洲风格电吉他',
						price: '¥ 2000'
					},
					{
						imgSrc: 'https://img2.baidu.com/it/u=3350348794,4217499586&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',
						desc: '淡雅',
						goodTitle: '车载香薰',
						price: '¥ 15'
					},
					{
						imgSrc: 'https://img1.baidu.com/it/u=1781118105,2770032789&fm=253&fmt=auto&app=120&f=JPEG?w=607&h=439',
						desc: '德龙Delong',
						goodTitle: '半自动研磨咖啡机',
						price: '¥ 678'
					},
					{
						imgSrc: 'https://img0.baidu.com/it/u=2020790863,1884632987&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						desc: '功能多用',
						goodTitle: '旅行必备咖啡保温杯',
						price: '¥ 97'
					},
					{
						imgSrc: 'https://img1.baidu.com/it/u=2243526539,3047179750&fm=253&fmt=auto&app=120&f=JPEG?w=887&h=800',
						desc: '容量大',
						goodTitle: '颜色定制行李箱',
						price: '¥ 230'
					},
					{
						imgSrc: 'https://img2.baidu.com/it/u=759202905,535986575&fm=253&fmt=auto&app=120&f=PNG?w=285&h=285',
						desc: '登山野营必备',
						goodTitle: '多功能遮阳伞',
						price: '¥ 59'
					},
					{
						imgSrc: 'https://imgservice.suning.cn/uimg1/b2c/image/DzAT-XpvnSibJN4UlMisCw.jpg_800w_800h_4e',
						desc: '三件套',
						goodTitle: '小熊抱枕',
						price: '¥ 189'
					},
				],
				allGoods: [{
						goodsAid: 1,
						goodsName: '耳机',
						img: 'https://mercrt-fd.zol-img.com.cn//t_s640x2000/g7/M00/07/08/ChMkLGYsjXSIAT0PAAXo3zImtlkAAdfCgJTub8ABej3030.png',
						price: '￥99'
					},
					{
						goodsAid: 2,
						goodsName: '耳机',
						img: 'https://mercrt-fd.zol-img.com.cn//t_s640x2000/g7/M00/07/08/ChMkLGYsjXSIAT0PAAXo3zImtlkAAdfCgJTub8ABej3030.png',
						price: '￥99'
					},
					{
						goodsAid: 3,
						goodsName: '耳机',
						img: 'https://mercrt-fd.zol-img.com.cn//t_s640x2000/g7/M00/07/08/ChMkLGYsjXSIAT0PAAXo3zImtlkAAdfCgJTub8ABej3030.png',
						price: '￥99'
					},
					{
						goodsAid: 4,
						goodsName: '耳机',
						img: 'https://mercrt-fd.zol-img.com.cn//t_s640x2000/g7/M00/07/08/ChMkLGYsjXSIAT0PAAXo3zImtlkAAdfCgJTub8ABej3030.png',
						price: '￥99'
					},
					{
						goodsAid: 5,
						goodsName: '耳机',
						img: 'https://mercrt-fd.zol-img.com.cn//t_s640x2000/g7/M00/07/08/ChMkLGYsjXSIAT0PAAXo3zImtlkAAdfCgJTub8ABej3030.png',
						price: '￥99'
					},
					{
						goodsAid: 6,
						goodsName: '耳机',
						img: 'https://mercrt-fd.zol-img.com.cn//t_s640x2000/g7/M00/07/08/ChMkLGYsjXSIAT0PAAXo3zImtlkAAdfCgJTub8ABej3030.png',
						price: '￥99'
					},
					{
						goodsAid: 7,
						goodsName: '耳机',
						img: 'https://mercrt-fd.zol-img.com.cn//t_s640x2000/g7/M00/07/08/ChMkLGYsjXSIAT0PAAXo3zImtlkAAdfCgJTub8ABej3030.png',
						price: '￥99'
					},
					{
						goodsAid: 8,
						goodsName: '耳机',
						img: 'https://mercrt-fd.zol-img.com.cn//t_s640x2000/g7/M00/07/08/ChMkLGYsjXSIAT0PAAXo3zImtlkAAdfCgJTub8ABej3030.png',
						price: '￥99'
					},
					{
						goodsAid: 9,
						goodsName: '耳机',
						img: 'https://mercrt-fd.zol-img.com.cn//t_s640x2000/g7/M00/07/08/ChMkLGYsjXSIAT0PAAXo3zImtlkAAdfCgJTub8ABej3030.png',
						price: '￥99'
					},
					{
						goodsAid: 10,
						goodsName: '耳机',
						img: 'https://mercrt-fd.zol-img.com.cn//t_s640x2000/g7/M00/07/08/ChMkLGYsjXSIAT0PAAXo3zImtlkAAdfCgJTub8ABej3030.png',
						price: '￥99'
					},
					{
						goodsAid: 11,
						goodsName: '耳机',
						img: 'https://mercrt-fd.zol-img.com.cn//t_s640x2000/g7/M00/07/08/ChMkLGYsjXSIAT0PAAXo3zImtlkAAdfCgJTub8ABej3030.png',
						price: '￥99'
					},
				],
			}
		},
		mounted() {
			// console.log("展示mounted");
			// 获取除去轮播图以外的其他信息
			this.getGoodsIndexRecommendInfo();
		},
		methods: {
			// 点击查看商品
			toGoodsDetail(item) {
				// console.log(item);
				// 商品详情页面
				const goodAid = item.goodAid;
				// console.log(item);
				uni.navigateTo({
					url: `/pages/tabBar/extUI/shopping_topBar/goodDetail?goodAid=${goodAid}`,
				})
			},
			// 获取除去轮播图以外的其他信息
			getGoodsIndexRecommendInfo() {
				const param = {
					type: '户外'
				}
				getGoodsIndexRecommendInfo(param).then(res => {
					// console.log(res);
					this.newGoods = res.data.data.newGoods;
					this.hotSellRecommendGoods = res.data.data.hotSellRecommendGoods;
					this.foryouRecommendGoods = res.data.data.foryouRecommendGoods;
					this.allGoods = res.data.data.allGoods;
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.motion_view_main {
		padding: 30rpx;
	}

	.motion_view_main::-webkit-scrollbar {
		display: none;
	}

	:root {
		--text-color: #000;
		--button-color: #000;
		--icon-color: #000;
	}

	.shopping_recommend_view {
		/* width: calc(100% - 30rpx); */
		margin-top: 50rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-bottom: 100rpx;

	}

	.shopping_recommend_view::-webkit-scrollbar {
		display: none;
	}

	.new_goods_text {
		font-size: 40rpx;
	}

	.hot_goods_text {
		margin-bottom: 40rpx;
	}

	.new_goods_main {
		width: 100%;
	}

	.new_goods_images_main {
		margin-top: 30rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.left_goods_image {
		width: 300rpx;
		height: 600rpx;
		background-size: cover;
		background-repeat: no-repeat;
		padding-top: 30rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		position: relative;
	}

	.left_goods_image button {
		margin-top: 30rpx;
		color: #ffffff;
		border-radius: 60rpx;
		border: none;
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
		background-color: #66596b;
		opacity: 0.7;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.new_goods_title {
		font-size: 35rpx;
		font-weight: 700;
		color: #ffffff;
	}

	.new_goods_desc {
		margin-top: 12rpx;
		font-size: 27rpx;
		color: #f4f4f4;
	}

	.right_goods_images {
		width: 300rpx;
		// height: 600rpx;
		// margin-left: 15rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.right_goods_images_top {
		width: 300rpx;
		height: 285rpx;
		background-size: cover;
		background-repeat: no-repeat;
		padding-top: 30rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		position: relative;
	}

	.right_goods_images_bottom {
		width: 300rpx;
		height: 285rpx;
		background-size: cover;
		background-repeat: no-repeat;
		padding-top: 30rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		// margin-top: 10rpx;
		position: relative;
		// background-color: #d69bc0;
	}

	.right_goods_images_top button {
		color: #ffffff;
		background-color: #66596b;
		opacity: 0.7;
		border-radius: 60rpx;
		border: none;
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.right_goods_images_bottom button {
		color: #ffffff;
		background-color: #66596b;
		opacity: 0.7;
		border-radius: 60rpx;
		border: none;
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.hot_sell_goods_main {
		margin-top: 100rpx;
		margin-bottom: 70rpx;
	}

	.hot_goods {
		display: flex;
		flex-direction: row;
		overflow-x: scroll;

	}

	.hot_goods::-webkit-scrollbar {
		display: none;
	}

	.hot_good_image {
		width: 100%;
		height: 300rpx;
	}

	.hot_sell_good {
		margin-right: 40rpx;
		/* 水平偏移量 垂直偏移量 模糊半径 颜色（这里使用rgba设置颜色及透明度） */
		/* 可以继续添加其他样式属性，如宽度、高度、背景色等，根据实际需求设置 */
		box-shadow: 6rpx 6rpx 10rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 50rpx;
		border-radius: 0 0 20rpx 20rpx;
	}

	.hot_good_desc {
		width: 280rpx;
		margin-top: 20rpx;
		font-size: 20rpx;
		letter-spacing: 1rpx;
		padding-left: 20rpx;
		color: #676767;
	}

	.hot_good_title {
		margin-top: 30rpx;
		font-size: 25rpx;
		width: 280rpx;
		padding-left: 20rpx;
		color: #000000;
	}

	.hot_good_price {
		margin-top: 100rpx;
		padding-bottom: 30rpx;
		padding-left: 20rpx;
	}

	.for_you_recommend {
		width: 100%;
		margin-bottom: 50rpx;
	}

	.for_you_goods {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 40rpx;
		/* background-color: #91ece5; */
	}

	.for_you_per {
		box-shadow: 6rpx 6rpx 10rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 50rpx;
		/* margin-right: 40rpx; */
		/* background-color: #75aaa0; */
		width: 325rpx;
	}

	.for_you_recommend_image {
		width: 325rpx;
		height: 325rpx;
	}

	.for_you_recommend_desc {
		width: 280rpx;
		margin-top: 20rpx;
		font-size: 20rpx;
		letter-spacing: 1rpx;
		padding-left: 10rpx;
		color: #676767;
	}

	.for_you_recommend_title {
		width: 280rpx;
		padding-left: 10rpx;
		margin-top: 30rpx;
		font-size: 30rpx;
		color: #000000;
	}

	.for_you_recommend_price {
		margin-top: 30rpx;
		padding-bottom: 50rpx;
		padding-left: 10rpx;
		font-size: 30rpx;
	}


	.recomment-goods-main {
		margin-top: 60rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;

		.item-goods {
			margin-bottom: 20rpx;
			box-shadow: 6rpx 6rpx 10rpx rgba(0, 0, 0, 0.1);

			.item-goods-image-view {
				.item-goods-image {
					width: 325rpx;
					height: 325rpx;
				}
			}

			.goods-name {
				margin-top: 10rpx;
				margin-left: 30rpx;
			}

			.goods-price {
				margin-top: 20rpx;
				margin-left: 30rpx;
				margin-bottom: 20rpx;
			}
		}
	}
</style>